<template>
  <div>
    <div v-if="showHome" :loading="loading">
      <div v-if="showPanel">
        <!-- <div>这是你的项目首页, 无法通过tag关闭! 请修改成你的内容!</div>
        <div>这是你的项目首页, 无法通过tag关闭! 请修改成你的内容!</div>
        <div>这是你的项目首页, 无法通过tag关闭! 请修改成你的内容!</div> -->
        <Row type="flex" justify="space-between">
          <!-- 审批中心 -->
          <Col span="12" style="padding:6px;">
            <Card bordered class="shenp">
              <p slot="title" class="title">审批中心</p>
              <div class="row_content">
                <Tabs size="small" v-model="tabstate" :animated="false">
                  <TabPane :label="label_dosth" name="name1">
                    <ul class="ul_li" v-for="(item, index) in todoList" :key="index" @click="detailHandle(item)">
                      <li class="one">
                        <p style="font-weight: bold;">{{ item.serviceTypeStr }}</p>
                        <div>
                          <span>{{ item.name }}</span>
                        </div>
                        <div>
                          <span>国资监管创新应用平台</span>
                          <span style="margin:0 15px">{{ item.startUserName }}</span>
                          <span>{{ item.startTime }}</span>
                        </div>
                      </li>
                      <li class="li_two">{{ item.taskName }}</li>
                    </ul>
                  </TabPane>

                  <TabPane :label="label_donesth" name="name2">
                    <ul
                      class="ul_li"
                      style="cursor: pointer"
                      v-for="(item, index) in todoList2"
                      :key="index"
                      @click="detailHandle(item)"
                    >
                      <li class="one">
                        <p style="font-weight: bold;">{{ item.serviceTypeStr }}</p>
                        <div>
                          <span>{{ item.name }}</span>
                        </div>
                        <div>
                          <span>国资监管创新应用平台</span>
                          <span style="margin:0 15px">{{ item.startUserName }}</span>
                          <span>{{ item.startTime }}</span>
                        </div>
                      </li>
                      <!--                    <li class="li_two">{{ item.taskName }}</li>-->
                    </ul>
                  </TabPane>
                </Tabs>
                <div class="more" @click="moreHandler('do', tabstate)">
                  更多
                  <Icon type="ios-arrow-round-forward" color="#0664D2" size="20" />
                </div>
              </div>
            </Card>
          </Col>
          <!-- 通知公告 -->
          <Col span="12" style="padding:6px; ">
            <Card bordered class="info">
              <p slot="title" class="title">通知公告</p>
              <!--          <div class="row_content">
                          <ul class="ul_info">
                            <li class="one">华润集团国资监管创新应用平台上线通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>
                          <ul class="ul_info">
                            <li class="one">2022年第四季度数据填报通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>
                          <ul class="ul_info">
                            <li class="one">华润集团国资监管创新应用平台上线通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>
                          <ul class="ul_info">
                            <li class="one">华润集团国资监管创新应用平台上线通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>
                          <ul class="ul_info">
                            <li class="one">华润集团国资监管创新应用平台上线通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>
                          <ul class="ul_info">
                            <li class="one">华润集团国资监管创新应用平台上线通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>
                          <ul class="ul_info">
                            <li class="one">华润集团国资监管创新应用平台上线通知！</li>
                            <li class="li_date">2022-11-28</li>
                          </ul>

                        </div>
                        <div class="more" @click="moreHandler('info')">更多
                          <Icon type="ios-arrow-round-forward" color="#0664D2" size='20'/>
                        </div>-->
            </Card>
          </Col>
        </Row>
        <!-- 帮助文档 -->
        <Row type="flex" justify="space-between">
          <Col span="24" style="padding:6px;margin-top: 6px;">
            <Card class="card" bordered>
              <p slot="title" class="title">帮助文档</p>
              <!--          <div class="row_content">


                          <Row class="help_row">
                            <Col span="12" class="li_one">华润集团国子监管创新应用平台_用户操作手册.PDF 2022-11-28 11:29:12 下载 预览</Col>
                            <Col span="8" class="li_date">2022-12-29</Col>
                            <Col span="4" class="li_end"><span>下载</span>{{ '\n\n' }}<span>预览</span></Col>
                          </Row>
                          <Row class="help_row">
                            <Col span="12" class="li_one">华润集团国子监管创新应用平台_用户操作手册.PDF 2022-11-28 11:29:12 下载 预览</Col>
                            <Col span="8" class="li_date">2022-12-29</Col>
                            <Col span="4" class="li_end"><span>下载</span>{{ '\n\n' }}<span>预览</span></Col>
                          </Row>
                        </div>

                        <div class="more" @click="moreHandler('help')">更多
                          <Icon type="ios-arrow-round-forward" color="#0664D2" size='20'/>
                        </div>-->
            </Card>
          </Col>
        </Row>
      </div>
      <do-sth :state="state" v-if="!showPanel" @Close="closeHandle"></do-sth>
    </div>
  </div>
</template>
<script>
import doSth from './todoList/do-sth.vue'
import todoListAPI from '@/api/todoListApi.js'
import ruleDetails from './ruleBaseManagement/pages/RuleDetails'
import ruleBaseAPI from '@/api/ruleBaseApi.js'
import { homeMapping } from '@/tools/util'
import { superviseInfoAPI } from '@api/superviseInfo'
import Vue from 'vue'
import { mapState } from 'vuex'
import detailPage from '@/components/detailInfo'

export default {
  components: {
    doSth
  },
  // mixins:[mixin],
  data() {
    return {
      label_dosth: h => {
        return h('div', [
          h('span', '待办'),
          h('Badge', {
            props: {
              count: this.count1
            }
          })
        ])
      },

      label_donesth: h => {
        if (this.tabstate === 'name1') {
          return h('div', [
            h('span', '已办')
            /*            h('Badge', {
              props: {
                count: this.count2
              }
            })*/
          ])
        }
        return h('div', [
          h('span', '已办'),
          h('Badge', {
            props: {
              count: this.count2
            }
          })
        ])
      },

      count1: 0,
      count2: 0,
      tabstate: 'name1',
      todoList: [],
      todoList2: [],
      state: null,
      showPanel: true,
      loading: true,
      showHome: true
    }
  },
  watch: {
    // tabstate() {
    // 	this.queryData()
    // }
  },
  created() {
    this.init()
  },
  computed: {
    ...mapState('user', {
      currentUser: state => state.currentSysInfo
    })
  },
  methods: {
    init() {
      // this._judgeGoBigScreenApp()
      let params = {
        condition: {
          state: 1
        },
        pageNum: 0,
        pageSize: 5
      }
      todoListAPI.querylist(params).then(res => {
        console.log(res.data, '待办')
        this.todoList = res.data.records
        this.count1 = res.data.total
      })
      let params2 = {
        condition: {
          state: 2
        },
        pageNum: 0,
        pageSize: 5
      }
      todoListAPI.querylist(params2).then(res => {
        console.log(res.data, '已办')
        this.todoList2 = res.data.records
        this.count2 = res.data.total
      })
    },
    // 判断是否跳转大屏项目
    // todo：接口调用嵌套太多，应该改为await模式，但是没有测试环境，后续优化
    _judgeGoBigScreenApp() {
      // 判断fromBigScree参数跳转不同地址
      // fromBigScree == 'Y'：表示从大屏项目跳转过来且按照约定直接跳到my_home
      // 否则任务是用户自己第一次登录进入，直接跳转到大屏首页
      let fromBigScree =
        this.$route.query.fromBigScree || this.$route.fromBigScree || sessionStorage.getItem('fromBigScree')
      if (fromBigScree == 'Y') {
        this.loading = false
        this.showHome = true
        sessionStorage.setItem('fromBigScree', 'Y')
        this.$router.push({ path: '/home' })
      } else {
        this.$Spin.show()
        // 自己检查白名单如果没有权限直接跳转到home
        // 获取白名单
        try {
          superviseInfoAPI.getValueList({ vsCode: 'white_name_list', appId: '' }).then(res1 => {
            let whiteNameList =
              res1.data && res1.data.length > 0 ? res1.data.map(item => item.vsiKey.toUpperCase()) : []
            superviseInfoAPI.getMiddlegroundUserInfo().then(res2 => {
              const params = {
                id: res2.userBasicVo.id,
                tenantCode: res2.userBasicVo.tenantCode
              }
              // 获取用户信息
              superviseInfoAPI.getCurrentSysInfo(params).then(res3 => {
                let currentUser = res3.data || {}
                let currentUserLdap = currentUser.userPurview.crsrmReporterLdap.toUpperCase()

                // 不在白名单
                if (!whiteNameList.includes(currentUserLdap)) {
                  this.loading = false
                  this.showHome = true
                  this.$Spin.hide()
                  this.$router.push({ path: '/home' })
                } else {
                  // 在白名单
                  // 获取大屏项目跳转地址
                  superviseInfoAPI.getValueList({ vsCode: 'big_scree_url', appId: '' }).then(res4 => {
                    if (res4.data && res4.data.length > 0) {
                      let href = res4.data[0].vsiDescription
                      // let buCode =
                      //   currentUser.userPurview.crsrmPurchaserSbu.split(',').length > 1
                      //     ? '50'
                      //     : currentUser.userPurview.crsrmPurchaserSbu // 当前登录人所在BU的code
                      let ldap = {
                        ldap: currentUserLdap,
                        at: Math.round(new Date().getTime() / 1000)
                      }
                      let userCodeList = window.btoa(JSON.stringify(ldap)).split('')
                      let firstCode = userCodeList[0]
                      let fiveCode = userCodeList[4]
                      userCodeList[0] = fiveCode
                      userCodeList[4] = firstCode
                      let base64Name = userCodeList.join('')
                      // currentUserLdap进行Base64加密同时约定：第1位字符和第五位字符互换
                      href = href + '?ldap=' + base64Name
                      // // 使用replace替换掉当前页面的href，防止浏览器有回退
                      window.location.replace(href)
                    }
                  })
                }
              })
            })
          })
        } catch (error) {
          this.$Spin.hide()
        }
      }
    },
    // 更多
    moreHandler(pro, tabstate) {
      console.log(pro, tabstate, 'more---更多-')
      if (pro == 'do' && tabstate == 'name1') {
        // new this.$sidelipPage(doSth, {props: {state: 1, title: '待办列表页'},isNav: false });
        this.showPanel = false
        this.state = 1
      }
      if (pro == 'do' && tabstate == 'name2') {
        // new this.$sidelipPage(doSth, {props: {state: 2, title: '已办列表页'},isNav: false });
        this.showPanel = false
        this.state = 2
      }
      if (pro == 'info') {
        // new this.$sidelipPage(doSth, {props: {title: '通知公告列表页'}});
      }

      if (pro == 'help') {
        // new this.$sidelipPage(doSth, {props: {title: '帮助文档列表页'}});
      }
    },

    //每行的点击详情时跳转到对应详情页
    detailHandle(row) {
      if (row.serviceType == 'RULE_MAINTENANCE') {
        let params = {
          codeList: [],
          dataItemName: '',
          dataSubject: '',
          describes: '',
          functionModules: '',
          idList: [],
          stateList: [],
          title: ''
        }
        let rowDetail = {}
        let detailId = row.applicationNo
        params.idList.push(detailId)
        ruleBaseAPI.queryList1(params).then(res => {
          if (!res.data.length) {
            this.$message.error('数据不存在')
            return
          } else {
            rowDetail = res.data[0]
            if (rowDetail.bpmnState) {
              new this.$sidelipPage(ruleDetails, {
                props: {
                  rowDetail,
                  detailId,
                  groupCode: rowDetail.code,
                  bpmnState: rowDetail.bpmnState,
                  isDisabled: false,
                  title: '详情信息(只读)',
                  route: 'rule-base'
                },
                isNav: false
              })
            } else {
              new this.$sidelipPage(ruleDetails, {
                props: { rowDetail, detailId, groupCode: rowDetail.code, title: '详情信息', route: 'rule-base' },
                isNav: false
              })
            }
          }
        })
      } else {
        this.$Spin.show()
        superviseInfoAPI.detailPage({ id: row.applicationNo }, homeMapping[row.serviceType][0]).then(res => {
          this.$Spin.hide()
          if (!res.data) {
            this.$message.error('数据不存在')
            return
          }
          const detailInfo = res.data
          new Vue.prototype.$sidelipPage(detailPage, {
            props: {
              detailInfo,
              detailField: homeMapping[row.serviceType][1],
              tableBelong: homeMapping[row.serviceType][2]
            },
            listId: row.applicationNo,
            isNav: false
          })
        })
      }
    },
    closeHandle() {
      this.showPanel = true
      this.state = null
      this.init()
    }
  }
}
</script>
<style lang="less" scoped>
.li_two {
  max-height: 21px;
  color: #ffb403;
  padding: 0 5px;
  background: rgba(255, 180, 3, 0.2);
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  cursor: pointer;
}

.title {
  font-weight: bold;
}

/deep/ .ivu-card-head {
  border-bottom: 1px solid #e8eaec;
  padding: 0px 4px;
  height: 30px;
  line-height: 40px;
  background-color: #e8e8e8;
}

/deep/ .ivu-card-body {
  padding: 6px;
}

.ul_info {
  border-bottom: 2px dashed #ccc;
  display: flex;
  justify-content: space-between;
}

.ul_li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

li {
  list-style-type: none;
}

ul,
.help_row {
  border-bottom: 1px solid #ccc;
  padding: 5px;
  font-size: 12px;
}

.li_one,
.li_end,
.more {
  color: #0664d2;
}

.li_end {
  text-align: end;
}

.info,
.shenp {
  position: relative;
  height: 450px;
  padding-bottom: 25px;

  .row_content {
    //    background-color: #FFB403;
    height: 380px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .more {
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
  }
}

.card {
  position: relative;
  height: 210px;
  padding-bottom: 25px;

  .row_content {
    //    background-color: #FFB403;
    height: 150px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .more {
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
  }
}
</style>
